<section class="hero is-medium intro">
  <div class="hero-body">
    <div class="container">
      <div class="intro-columns">
        <div class="intro-column is-content">
          <div class="intro-content">
            <h1 class="title intro-title">
              <strong>Bulma</strong> is a free and open source <strong>CSS</strong> framework based on <strong>Flexbox</strong>.
            </h1>

            <div id="ghbtns" class="intro-ghbtns">
              <iframe src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
              <iframe src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=fork&count=false&size=large" frameborder="0" scrolling="0" width="80px" height="30px"></iframe>
            </div>

            {% assign npmInstall = 'npm install bulma' %}

            <pre id="npm" class="intro-npm"><code>{{ npmInstall }}</code><code id="npmCopy" class="intro-npm-copy" data-clipboard-text="{{ npmInstall }}">copy</code></pre>

            <nav class="intro-buttons">
              <a class="button is-primary is-large" href="{{ site.download }}">
                <span>
                  <strong>Download</strong>
                  <small>v{{ site.version }}</small>
                </span>
              </a>
              <a class="button is-light is-large" href="{{ site.documentation }}">
                <span>
                  <span>View</span>
                  <strong>docs</strong>
                </span>
              </a>
            </nav>
          </div>
        </div>

        <div class="intro-column is-video">
          <div id="introVideo" class="intro-video">
            <div class="intro-shadow" style="background-image: url();"></div>
            <div class="intro-spinner"></div>
            <div class="intro-iframe">
              <iframe id="introIframe" src="https://player.vimeo.com/video/237608586?color=00d1b2" width="640" height="338" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
            </div>
          </div>
          <p class="intro-author">
            <span>Video by <a href="http://codepop.com/open-sourcecraft/" target="_blank">Open SourceCraft</a></span>
          </p>
        </div>
      </div>

      <div class="intro-carbon">
        {% include carbon.html %}
      </div>
    </div>
  </div>
</section>
